{extend name="common/layout" /}
{block name="main"}
<div class="admin-main layui-anim layui-anim-upbit">
  <div class="padding30">

    <h3 class="page-box-title">{:lang('Network Line')}</h3>
    <div class="demoTable">
        <div class="layui-inline">
            <input class="layui-input layui-search-input" style="width: 250px;" name="key" id="key" placeholder="{:lang('Please Enter Username / Line Name')}">
        </div>
        <button class="layui-btn layui-search-btn layui-btn-normal" id="search" data-type="reload">{:lang('Search')}</button>
        <a class="layui-btn layui-btn-warm borderrad5" id="downReport" href="#" data-href="{$repotUrl}" data-title="{:lang('Export Line')}">{:lang('Export')}</a>  
        
        <!-- <a class="layui-btn" href="{:U('create')}" style="float: right;">{:lang('Network Open Application')}</a> -->
        <div style="clear: both;"></div>
    </div>
  </div>
    <div class="layui-row layui-col-space15" style="margin-top: 20px;">
        <div class="layui-col-md12 network-list" id="_listview" style="padding-left:20px;">
          
        </div>
    </div>
</div>
{/block}
{block name="footer"}
<script type="text/javascript" id="report-html">
    <div style="margin-top:35px;padding:25px;">
        <form class="layui-form dialog-form" method="post" id="_field-form" action="" target="_blank" >
          <div class="layui-form-item" style="position: relative;">
              <label class="layui-form-label layui-form-label-no" >{:lang('Export Field')} : </label>
              <div class="layui-input-block field-s" style="height:30px;overflow: hidden;">
               <?php $i=0;?>
               <?php foreach($fiels as $field=>$val):?>
                <input type="checkbox" name="fields[]" {$i<6 ? 'checked': ''} value="{$field}" lay-skin="primary" title="{$val}">
                <?php $i++;?>
                <?php endforeach;?>

              </div>
              <span id="more-click" title="{:lang('More')}"><i class="icon icon-circle-down"></i></span>
            </div>
          <div class="layui-form-item">
              <label class="layui-form-label layui-form-label-no" >{:lang('Export File')} : </label>
              <div class="layui-input-block" style="">
               <input name="ext" value="xlsx" title="xlsx" checked="" type="radio">
               <input name="ext" value="xls" title="xls" type="radio">
               <input name="ext" value="csv" title="csv" type="radio">
              </div>
          </div>
      </form>
    </div>
</script>
<script type="text/html" id="network-lists">
    {{# if(d.data.length>0){ }}
    {{#  layui.each(d.data, function(index, item){ }}
    <div class="layui-card" style="">
        <a href="#" data-href="{:url('view')}?network_id={{item.id}}" data-title="{:lang('Network Line')}" class="_network-view-info">
          <div class="layui-card-body">
            <div class="layui-col-md12" >
                <div class="layui-col-xs3" style="text-align: center;">
                  <p>
                    {{# if(item.type == 3){ }}
                        <i class="icon icon-onedrive netword-icon" ></i>
                    {{# }else { }}
                        <i class="icon icon-earth netword-icon"></i>
                    {{# } }}
                </p>
                   <p class="typec">{{item.typelabel}}</p>     
                </div>
                <div class="layui-col-xs6" style="text-align: center;">
                    <p class="n-name">{{item.name}}</p>
                  <div class="layui-progress" style="">
                      <div class="layui-progress-bar layui-bg-orange" lay-percent="0%"></div>
                    </div>
                    <div class="n-desc">
                        {{item.broadband}} Mbps
                        {{# if(item.status==8 && item.broadband < item.mbs){ }}
                            <i class="icon icon-move-up" ></i> {{item.mbs}}(Mbps)
                        {{# } }}
                        {{# if(item.status==8 && item.broadband > item.mbs){ }}
                           <i class="icon icon-move-down" ></i> {{item.mbs}}(Mbps)
                        {{# } }}
                        {{item.total}} / {:lang('Month')} 
                        <div style="font-size: 12px;">【{{item.statuslabel}}】</div>
                      </div>
                </div>
                <div class="layui-col-xs3" style="text-align: center;">
                  <p>
                    {{# if(item.endtype == 3){ }}
                        <i class="icon icon-onedrive netword-icon" ></i>
                    {{# }else { }}
                        <i class="icon icon-earth netword-icon" ></i>
                    {{# } }}
                </p>
                   <p class="typec">{{item.z_type}}</p>
                </div>
            </div>

            <div style="clear:both"></div>
            <div class="layui-card-bottom-dot"><span></span><span></span><span></span></div>
        </div>
        </a>
        <?php if($adminType == 1):?>
        <span class="down-nav" style="position: absolute;top: 15px;right: 15px;">
          {{# if(item.status == 12 || item.status == 15 || item.status == 16){ }}
          <a href="#" data-href="{:url('delete')}?item_id={{item.id}}" class="_delete" data-confirm="{:lang('Are you sure you want to apply for deletion?')}"><i class="icon icon-bin" style="color: #fff;"></i></a>
          {{# }else{ }}
          <a href="#" data-href="" class="_delete1"><i class="icon icon-bin" style="color: #313131;"></i></a>
          {{# } }}
        </span>
        <?php endif;?>
        <!--客服-->
        <?php if($adminType == 4):?>
        <span class="down-nav" style="position: absolute;top: 15px;right: 15px;">
           <a href="#"><i class="icon icon-menu2" style="color: #fff;"></i></a>
           <ul class="down-nav-num" >
            <li class="nav-item"><i class="icon icon-file-text"></i> <a href="#" data-href="{:url('view')}?network_id={{item.id}}" data-title="{:lang('Network Line')}" class=" _network-view-info">{:lang('Details')}</a></li>
             {{# if(item.is_renewal){ }}
            <li class="nav-item"><i class="icon icon-clock"></i> <a href="#" data-href="{:U('renewal')}?netword_id={{item.id}}" class="_renewal" >{:lang('_Renewal')}</a></li>
            {{# }else{ }}
            <li class="nav-item disabled"><a href="#" data-href="" class="disabled"><i class="icon icon-clock"></i>{:lang('_Renewal')}</a></li>
            {{# } }}
           </ul>
        <?php endif;?>

      </div>
      {{#  }); }}
      {{# }else{ }}
        <div class="not-datalist">{{d.msg}}</div>
      {{# } }}
</script>
<script type="text/html" id="localcloud">
    {{# if(d.type==3){ }}
      {{d.cloudlabel}}
    {{# }else{ }}
        {{d.typelabel}}
    {{# } }}
</script>
<script type="text/javascript" id="_Mbps">
    {{d.broadband}} (Mbs)
    {{# if(d.status==8 && d.broadband < d.mbs){ }}
        <i class="icon icon-move-up" style="color: #07ac68;font-size: 18px;"></i> {{d.mbs}} (Mbps)
    {{# } }}
    {{# if(d.status==8 && d.broadband > d.mbs){ }}
       <i class="icon icon-move-down" style="color: #07ac68;font-size: 18px;"></i> {{d.mbs}} (Mbps)
    {{# } }}
</script>    
 <script type="text/javascript" id="line-name">
    <a href="{:url('view')}?network_id={{d.id}}">{{d.name}}</a>
 </script>                      
<script type="text/html" id="action">
    {{#  if(d.status == 12 || d.is_out==1){ }}
        <a  href="{:url('edit')}?network_id={{d.id}}" class="layui-btn layui-btn-xs" >{:lang('Reopen')}</a>
    {{# }else if(d.status == 4){ }}
        <a href="{:url('edit')}?network_id={{d.id}}" class="layui-btn layui-btn-xs">{:lang('Modify')}</a>
    {{# }else{ }}
        <a href="{:url('view')}?network_id={{d.id}}" class="layui-btn layui-btn-xs layui-btn-normal">{:lang('Details')}</a>
    {{#  } }} 
   
   {{#  if(d.status == 12 || d.status == 10 || d.status == 8){ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-disabled" disabled >{:lang('Delete')}</a>
    {{# }else{ }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">{:lang('Delete')}</a>
    {{#  } }} 
    
   {{#  if(d.status == 2 && d.is_out!=1){ }} 
        <a class="layui-btn layui-btn-warm layui-btn-xs _update" href="#" data-href="{:url('update')}?network_id={{d.id}}&cat=update"  lay-event="update">{:lang('Line Adjustment')}</a>
   {{# }else{ }}
        <a class="layui-btn layui-btn-warm layui-btn-xs layui-btn-disabled" disabled >{:lang('Line Adjustment')}</a>
   {{# } }}
</script>
   <script type="text/javascript">
    var loading=null;
    layui.use('laytpl', function() {
        
        var laytpl = layui.laytpl,$ = layui.jquery
        loadData(laytpl,'');
         //搜索
        $('body').on('click', "#search",function () {
            var key = $('#key').val();
            loading =layer.load(1, {shade: [0.1,'#fff']});
            loadData(laytpl,key);
            
        });
        /*删除数据*/
        $('body').on('click',"._delete",function(){
            var _this = $(this);
            if(_this.hasClass('disabled')){
                return false;
            }
            var confirm = layer.confirm(_this.data('confirm'), function(index){
                loading =layer.load(1, {shade: [0.1,'#fff']});
                layer.close(confirm);
                _this.addClass('disabled')
                $.post(_this.data('href'),{},function (res) {
                    layer.close(loading);
                    _this.removeClass('disabled');
                    if (res.code==1) {
                        layer.msg(res.msg,{time:1000,icon:1},function(){
                            location.reload();
                        });
                    }else{
                        layer.msg(res.msg,{time:1000,icon:2});
                        return false;
                    }
                })
            })   
            return false;   
        })
        
        /*续期*/
        $("body").on('click',"._renewal",function(){
            var _this = $(this);
            layer.open({
                type: 2 //此处以iframe举例
                ,title: _this.data('title')
                ,area: ['1100px', '700px']
                ,shade: 0.8
                ,content: _this.data('href')
                ,zIndex: layer.zIndex //重点1
            })
        })
        
    })
    /*加载数据*/
    function loadData(laytpl,key){
        $.post("{:url('index',array('type'=>$type))}",{key:key},function(res){
            if(loading != null){
                layer.close(loading);
            }   
            laytpl($("#network-lists").html()).render(res, function(html){
                $("#_listview").html(html)
            })
        })
    }
   	layui.use('table', function() {
   		 var table = layui.table, $ = layui.jquery,form = layui.form;
   		 // var tableIn = table.render({
      //       elem: '#list'
      //       ,url: "{:url('index',array('type'=>$type))}",
      //       method:'post',
      //       page:getPageThume()
      //       ,cols: [[
      //           {checkbox: true, },
      //           {field:'item', title: "{:lang('No.')}", width:"60",align:'center'},
      //           {field:'name', title: "{:lang('Line Name')}", width:"150",sort:true,templet: '#line-name'},
      //           {field: 'locallabel',  title: '{:lang("Local Access")}', width:200},
      //           {field: 'endclou', align: 'center', title: '{:lang("Peer Connection")}', width: "200"},
      //           {field: 'broadband', align: 'center', title: '{:lang("Bandwidth")}', width: "120", templet: '#_Mbps'},
      //           {field: 'statuslabel', align: 'center', title: '{:lang("Status")}', width: "120" ,sort:true},
      //           {field: 'approtime', align: 'center', title: '{:lang("Opening Date")}', width: "150" ,sort:true},
      //           {field: 'enddate', align: 'center', title: '{:lang("Expire Date")}', width: "150" ,sort:true},
      //           {field: 'total', align: 'center', title: '{:lang("Monthly rental fee")}', width: "150" ,sort:true},
      //           {width:"20%",title: "{:lang('Operating')}", align:'right', toolbar: '#action'}
      //       ]]
      //   });

         form.on('switch(status)', function(obj){
            loading =layer.load(1, {shade: [0.1,'#fff']});
            var id = this.value;
            var status = obj.elem.checked===true?1:0;
            $.post('{:url("editState")}',{'id':id,'status':status},function (res) {
                layer.close(loading);
                if (res.status==1) {
                    tableIn.reload();
                }else{
                    layer.msg(res.msg,{time:1000,icon:2});
                    return false;
                }
            })
        });
         /*删除*/
        table.on('tool(list)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){  //申请删除线路
                var confirm = layer.confirm('{:lang("Are you sure you want to delete it")}', function(index){
                    loading =layer.load(1, {shade: [0.1,'#fff']});
                    layer.close(confirm);
                    $.post('{:url("delete")}',{item_id:data.id},function (res) {
                        layer.close(loading);
                        if (res.code==1) {
                            layer.msg(res.msg,{time:1000,icon:1},function(){
                                tableIn.reload();
                            });
                            
                        }else{
                            layer.msg(res.msg,{time:1000,icon:2});
                            return false;
                        }
                    })
                })           
            }
            /*重新开通*/
            if(obj.event === 'rekaiton'){  //申请删除线路
                console.log(obj);
                var confirm = layer.confirm('{:lang("Confirm Reopen?")}', function(index){
                    loading =layer.load(1, {shade: [0.1,'#fff']});
                    layer.close(confirm);
                    $.post('{:url("rekaiton")}',{network_id:data.id},function (res) {
                        layer.close(loading);
                        if (res.code==1) {
                            tableIn.reload();
                        }else{
                            layer.msg(res.msg,{time:1000,icon:2});
                            return false;
                        }
                    })
                })           
            }
            
        })
        /*点击*/
        $("#downReport").click(function(){
            var _this = $(this);
            layer.open({
                type: 1 //此处以iframe举例
                ,title: _this.data('title')
                ,area: ['750px', '450px']
                ,shade: 0.6
                ,content: $("#report-html").html()
                ,zIndex: layer.zIndex //重点1
                ,btn:['确定']
                ,yes:function(){
                    $("#_field-form").attr('action',_this.attr('data-href'))
                    $("#_field-form").submit();
                    // var loading = layer.load(1, {shade: [0.1, '#fff']});
                    // $.post(_this.attr('href'),$("#_field-form").serialize(),function(res){
                    //     layer.close(loading);
                    // })
                }
            })
            form.render();
            $("#more-click").click(function(){
                if($(this).hasClass('open')){
                    $(this).removeClass('open')
                    $(this).find('i').removeClass('icon-circle-up')
                    $(this).find('i').addClass('icon-circle-down')
                    $(".field-s").animate({height:'30px'});
                }else{
                    $(this).addClass('open')
                    $(this).find('i').addClass('icon-circle-up')
                    $(this).find('i').removeClass('icon-circle-down')
                    $(".field-s").animate({height:'120px'});
                }
              
            });
            
            return false;
        })
         //搜索
        $('#search').on('click', function () {
            var key = $('#key').val();
            tableIn.reload({
                where: {key: key},
                done: function(res, curr, count){
                    console.log(res);
                    $("#downReport").attr("data-href",res.repotUrl);
                }
            });
        });
   	})
      
   </script>
{/block}